{include file="public/header,public/nav,public/fixbar" title="<?php echo $info['name']?>-<?php echo request()->pc_info['seo_title']?>"/}
<style>
    .layui-card-body p img {
        width: 100%;
    }
    .layui-table-cell {
        line-height: unset;
        padding: 5px 10px;
    }
</style>
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-main margin-bottom-10">
            <div class="layui-col-space10 item">
                <div class="layui-col-xs12">
                    <div class="product-info">
                        <h1>{$info.name}</h1>
                        <div class="product-desc layui-text">
                            <p>
                                {foreach $info.tags as $v}
                                    {if $v}
                                        <span class="layui-btn layui-btn-primary layui-btn-xs">{$v}</span>
                                    {/if}
                                {/foreach}
                                
                                <span class="layui-btn layui-btn-primary layui-btn-xs">已有 {$info.real_sales+$info.virtual_sales} 人参与</span>

                                <span class="layui-btn layui-btn-primary layui-btn-xs">共 {$info.question_num} 题</span>
                            </p>
                        </div>
                        <div class="price">
                            <span class="current-price">{if $info.sale_price <= 0 } 免费 {else} ￥{$info.sale_price} {/if}</span>
                            <span class="original-price">¥{$info.original_price}</span>
                        </div>
                        <!-- 说明 -->
                        {if $info.is_member_discount == 0 || $info.gift_integral > 0}
                        <div>
                            <span>说明：{if $info.is_member_discount == 0} 该商品不参与会员折扣， {/if} {if $info.gift_integral > 0}购买可得 <b>{$info.gift_integral}</b> 积分{/if}</span>
                        </div>
                        {/if}
                        <!-- 考试规则 -->
                        <div class="layui-elem-quote">
                            <span>
                                <span class="text">考试时间：</span>
                                {if $info.set.exam_time_type == 0} 不限制 {else} {$info.set.exam_start_time} ~ {$info.set.exam_end_time} {/if}
                            </span>
                            <span lay-separator="" style="margin: 0px 10px;color:#ddd;">|</span>
                            <span>
                                <span class="text">可考次数：</span>
                                {if $info.set.exam_num == 0} 不限制 {else} {$info.set.exam_num} 次 {/if}
                            </span>
                            <span lay-separator="" style="margin: 0px 10px;color:#ddd;">|</span>
                            <span>
                                <span class="text">答卷时长：</span>
                                {if $info.set.answer_time == 0} 不限制 {else} {$info.set.answer_time} 分钟 {/if}
                            </span>
                            <span lay-separator="" style="margin: 0px 10px;color:#ddd;">|</span>
                            <span>
                                <span class="text">可考试次数：</span>
                                {if $info.set.exam_num == 0} 不限制 {else} {$info.set.exam_num}次 {/if}
                            </span>
                        </div>
                        <!-- 操作按钮 -->
                        <div class="action-buttons">
                            {if $info.status == 0}
                            <button class="layui-btn layui-btn-disabled layui-btn-lg">
                                已下架
                            </button>
                            {else}
                                {if $info.is_buy == 1}
                                <a class="layui-btn layui-bg-success layui-btn-lg" href="/exam/practice_detail?product_id={$info.id}">
                                    <i class="iconfont icon-kaoshi"></i> 进入考试
                                </a>
                                {else}
                                    {if $info.sale_price <= 0}
                                    <button class="layui-btn layui-bg-success layui-btn-lg free-receive" data-id="{$info.id}">
                                        免费领取
                                    </button>
                                    {else}
                                    <button class="layui-btn layui-bg-red layui-btn-lg order-prepare" data-id="{$info.id}" data-attr_id = "{$info.attr_id}">
                                        立即购买
                                    </button>
                                    {/if}
                                {/if}
                            {/if}
                            <button class="layui-btn layui-btn-primary layui-btn-lg favorites" user-login data-id="{$info.id}">
                                <i class="layui-icon {if $info.is_favorites} layui-icon-star-fill active {else} layui-icon-star {/if} layui-font-20"></i> 收藏
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品详情标签页 -->
        <div class="layui-col-space10">
            <div class="layui-col-xs12 layui-col-md8 layui-col-lg8">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">考试记录</li>
                            </ul>
                            <div class="layui-tab-content" style="padding-bottom: 0px;">
                                <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-md4 layui-col-lg4">
                <div class="layui-main">
                    <div class="layui-row">
                        <div class="layui-font-16 margin-bottom-15 font-weight-bold">
                            <i class="layui-icon layui-icon-fire layui-font-16 padding-right-5 layui-font-red"></i>
                            相关考试
                        </div>
                        <div class="layui-col-space15">
                            {foreach $related_list as $v}
                            <div class="layui-col-xs12 article-li">
                                <a href="{$v.href}">
                                    <div class="layui-card">
                                        <div class="layui-card-body">
                                            <div class="item">
                                                <div class="justify-content-center">
                                                    <img style="background-color: {$v.background_color};margin-right: 0px;" src="{$v['head_imgs']}" class="user-goods-img">
                                                    <span class="exam-sub-title">{$v.sub_title}</span>
                                                </div>
                                                <div class="detail">
                                                    <div class="product-title layui-ellips">
                                                        <span class="item-title-label">{$v.product_type_text}</span>{$v.name}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-card-footer">
                                            <p class="text">已有 <b>{$v.virtual_sales+$v.real_sales} </b>人参与</p>
                                            {if $v.sale_price == 0}
                                            <p class="product-price layui-font-16">免费</p>
                                            {else}
                                            <p class="product-price layui-font-16"><span class="symbol">￥</span>{$v.sale_price}</p>
                                            {/if}
                                        </div>
                                    </div>
                                </a>
                            </div>
                            {/foreach}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['layer', 'table'], function(){
        var table = layui.table, layer = layui.layer, $ = layui.$;
        
        // 商品收藏/取消
        $(".favorites").click(function(){
            var loading = layer.load();
            var product_id = $(this).data('id');
            $.ajax({
                url:"/user/favorites_product",
                type:'post',
                data:{"product_id":product_id},
                dataType:'JSON',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);
                    if(res.code==0){
                        layer.msg(res.msg,{icon: 1,time: 1500},function(){
                            if (res.data == 1) {
                                // 收藏
                                $(".favorites").find('i').removeClass('layui-icon-star-fill active layui-icon-star');
                                $(".favorites").find('i').addClass('layui-icon-star-fill active');
                            } else {
                                // 取消收藏
                                $(".favorites").find('i').removeClass('layui-icon-star-fill active layui-icon-star');
                                $(".favorites").find('i').addClass('layui-icon-star');
                            }
                        });
                    }else{
                        layer.msg(res.msg,{icon: 2,time: 2000});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
        });

        var product_id = "{$info.id}";
        
        var tableInfo = table.render({
            elem: '#tableList',
            url:'/exam/get_exam_log',
            method: 'post',
            lineStyle: 'height: 185px;',
            height: 'full-200',
            defaultToolbar: [],
            cols: [[
                {field:'', title:'', align: 'left', templet: function(d){
                    var score = `<b>${d.score} 分</b>`;
                    if (d.score == '-1') {
                        score = d.extra
                    }
                    var like = `<i user-login style="cursor: pointer;" class="layui-icon layui-icon-heart layui-font-22 like" data-id="${d.id}"></i>`;
                    if (d.is_like == 1) {
                        like = `<i user-login style="cursor: pointer;" class="layui-icon layui-icon-heart-fill layui-font-22 layui-font-red unlike" data-id="${d.id}"></i>`;
                    }
                    var html = `<div class="layui-panel">
                                    <div class="space-between margin-bottom-10">
                                        <div class="align-items-center">
                                            <img src="${d.user.avatar}" class="layui-nav-img margin-right-10" style="width: 50px;height: 50px;">
                                            <div>
                                                <p>${d.user.nickname_two}</p>
                                                <span class="text">${d.sub_time}</span>
                                            </div>
                                        </div>
                                        <div class="text-align-center">
                                            <p>${like}</p>
                                            <span class="text">${d.like}</span>
                                        </div>
                                    </div>
                                    <div class="align-items-center margin-bottom-10">
                                        <i class="layui-icon layui-icon-ok-circle layui-font-18 layui-font-success margin-right-5"></i>
                                        完成了：${d.product_name}
                                    </div>
                                    <div class="layui-elem-quote space-between margin-bottom-0">
                                        <p>
                                            <span class="text">用时：</span>
                                            <span class="letter-spacing-1">${d.show_time}</span>                      
                                        </p>
                                        <p>
                                            <span class="text">正确率：</span>
                                            <b>${d.correct_rate}</b>                          
                                        </p>
                                        <p>
                                            <span class="text">分数：</span>
                                            <span class="layui-font-red">${score}</span>                             
                                        </p>
                                    </div>
                                </div>`;
                    return html;
                }}
            ]],
            id: 'listReload',
            limits: [5, 10, 30, 50],
            limit: 5,
            page: true,
            where: {'product_id':product_id},
            done: function (res, curr, count) {
                if (res.code == 0) {
                    $(".layui-table-header").find('tr').addClass('layui-hide');
                } else {
                    layer.msg(res.msg,{icon: 2});
                }
            },
            text: {
                none: '<div class="layui-empty"><img src="/static/images/nodata/no_exam.png"><p>暂无考试记录~</p></div>'
            }
        });

        // 考试记录点赞
        $(document).on('click', '.like',function(){
            var id = $(this).data('id');
            var loading = layer.load();
            $.ajax({
                url:"/user/like",
                type:'post',
                data:{"id":id, "like_type":3},
                dataType:'JSON',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);
                    if(res.code==0){
                        layer.msg(res.msg,{icon: 1,time: 1500},function(){
                            table.reloadData('listReload');
                        });
                    }else{
                        layer.msg(res.msg,{icon: 2,time: 2000});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
        });

        // 考试记录取消点赞
        $(document).on('click', '.unlike',function(){
            var id = $(this).data('id');
            var loading = layer.load();
            $.ajax({
                url:"/user/unlike",
                type:'post',
                data:{"id":id, "like_type":3},
                dataType:'JSON',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);
                    if(res.code==0){
                        layer.msg(res.msg,{icon: 1,time: 1500},function(){
                            table.reloadData('listReload');
                        });
                    }else{
                        layer.msg(res.msg,{icon: 2,time: 2000});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
        });

        // 去购买
        $(document).on('click', '.order-prepare',function(){
            var user_id = "{:session('user.id')}";
            if (!user_id) {
                open_login();
                return false;
            }
            var id = $(this).data('id');
            var attr_id = $(this).data('attr_id');
            location.href = '/order/prepare?id='+id+'&attr_id='+attr_id;
        })

        // 免费领取
        $(document).on('click', '.free-receive',function(){
            var id = $(this).data('id');
            layer.confirm('确定免费领取该考试吗？', {
                skin: 'layui-layer-radius', // 弹窗主题样式
                title : '操作确认',
            },function(index){
                var loading = layer.load();
                $.ajax({
                    url:"/order/get_free_power",
                    type:'post',
                    data:{"product_id":id},
                    dataType:'JSON',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(res){
                        layer.close(loading);
                        if(res.code==0){
                            layer.msg(res.msg,{icon: 1,time: 1500},function(){
                                location.reload();
                            });
                        }else{
                            layer.msg(res.msg,{icon: 2,time: 2000});
                        }
                    },
                    error:function(e){
                        layer.close(loading);
                        layer.msg('请求失败'+e.responseText,{icon: 2});
                    },
                });
            })
            
        })
    });
</script>